<template>  
    <div class="details">  
      <h1>{{ item.title }}</h1> 
      <img :src="item.image" alt="商品图片"> 
      <p>{{ item.description }}</p>  
      <p>价格: ¥{{ item.price }}</p>  
      <div class="card">
        <button @click="goOrder">添加到购物车</button>
        <button>联系商家</button>
      </div>    
      <button @click="goBack">返回首页</button>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    name: 'Details',  
    props: ['itemId'],  
    data() {  
      return {  
        items: [  
          { id: 1, title: '二手手机', description: '9成新，无损坏', price: 4500,image:'https://www.helloimg.com/i/2024/10/24/671a3d5c91b75.jpg' },  
          { id: 2, title: '二手笔记本', description: '8成新，电池续航好', price: 8000 },  
          { id: 3, title: '二手相机', description: '几乎全新，带原装包装', price: 5000 },  
        ],  
        item: null,  
      };  
    },  
    created() {  
      this.item = this.items.find(item => item.id === parseInt(this.$route.params.id));  
    },  
    methods: {  
      goBack() {  
        this.$router.push({ name: 'Home' });  
      },
      goOrder(){
        this.$route.push({name:'Order'})
      }
    },  
  };  
  </script>  
    
  <style scoped>  
  .details {  
    padding: 20px;  
    text-align: center;  
  } 
  .card{
    margin-bottom: 10px;
  } 
  </style>